<template>
  <div>
    <Header></Header>
    <div style="background:#f6f6f6;width:100%;height:30px;"></div>
    <div class="classification">
      <div class="left">
        <div class="left-container">
          <div class="box">
            <div class="title">{{questionInfo.title}}</div>
            <div class="item">
              <li @click="commentQ">回答</li>
              <li>
                <span v-if="questionInfo.is_follower == 0" @click="gz">关注问题</span>
                <span v-if="questionInfo.is_follower == 1" @click="qx">以关注</span>
              </li>
              <li>邀请回答</li>
              <li>
                <i class="iconfont icon-all-daohang"></i>
                分享
              </li>
              <li>系统打赏</li>
            </div>
            <div class="container" v-if="flag">
              <textarea name="comment" id placeholder="欢迎留言讨论~！" v-model="textQ"></textarea>
              <div class="container-foot">
                <span class="qx" @click="cancelQ">取消回复</span>
                <input class="comment-submit" type="submit" value="发布" @click="sumbitQ">
              </div>
            </div>
            <div class="content">{{questionInfo.description}}</div>
          </div>
          <div class="list">
            <div class="comment" v-for="(item,index) in commentList" :key="index">
              <div class="comment_list" @click="goComment(item)">{{item.content}}</div>
              <div class="tab_right_menu">
                <!-- <button >我要PK</button> -->
                <li>
                  <i class="iconfont icon-all-like"></i>
                  点赞
                </li>
                <li @click="comment(item,index)">
                  <i class="iconfont icon-all-pinglun2"></i>
                  评论
                </li>
                <li>
                  <i class="iconfont icon-all-shoucang1"></i>
                  关注
                </li>
                <li>
                  <i class="iconfont icon-all-daohang"></i>
                  分享
                </li>
                <li>
                  <i class="iconfont icon-all-dashang" style="color:#f9bf00"></i>
                  打赏
                </li>
                
              </div>
              <div class="container" v-if="index == i">
                <textarea name="comment" id placeholder="欢迎留言讨论~！" v-model="textP"></textarea>
                <div class="container-foot">
                  <span class="qx" @click="cancel(item,index)">取消回复</span>
                  <input class="comment-submit" type="submit" value="发布" @click="sumbitP(item)">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/images/card.jpg" alt>
        <img src="../../assets/images/card.jpg" alt>
        <div class="right-tags">
          <div class="tags-title">
            <P>热门标签</P>
          </div>
          <div class="tags-content">
            <div>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
            </div>
          </div>
        </div>
        <div class="tags-list">
          <div class="box">2019年十大营销关键词</div>
          <div class="list-title">
            <P>热门文章</P>
          </div>
          <img src="../../assets/images/card.jpg" alt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import qs from "qs";
export default {
  name: "replyQuestion",
  data() {
    return {
      questionIndex: 10,
      i: -1,
      questionInfo: {},
      commentList: [],
      flag: false,
      questionIndex: 10,
      commment_id: "",
      id: "",
      textQ: "",
      textP: ""
    };
  },
  methods: {
    //回复评论弹框
    comment(item, index) {
      this.i = index;
    },
    cancel(item, index) {
      this.i = -1;
    },
    //问答回复弹框
    commentQ() {
      this.textQ = '';
      console.log(111);
      this.flag = true;
    },
    cancelQ() {
      this.flag = false;
    },
    //获取问答ID
    getmessage() {
      this.id = this.$route.query.questions_id;
      console.log(this.id);
    },
    //获取问答详情
    getQuestion() {
      let param = {
        questions_id: this.id,
        limit: this.questionIndex,
        member_id: this.getCookie("member_id"),
      };
      this.$axios
        .post("api/App/User/Question/question_detail", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          console.log(res);
          this.questionInfo = res.data.data.question_info;
          this.commentList = res.data.data.commment_list;
        });
    },
    // 回复详情
    goComment(item) {
      console.log(item);
      //  return;
      this.$router.push({
        path: "/questionList",
        query: { comment_id: item.id }
      });
    },
    //回复问答
    sumbitQ() {
      //评论内容不能为空
      if (this.textQ == "") {
        this.$confirm("回复内容不能为空", "提示", {
          type: "warning"
        });
        return;
      }
      if (this.textQ,length <10) {
        this.$confirm("回复内容不能小于10个字符", "提示", {
          type: "warning"
        });
        return;
      }
      let param = {
        table_type: 1,
        source_id: this.id,
        member_id: this.getCookie("member_id"),
        content: this.textQ
      };
      this.$axios
        .post("/api/App/User/News/all_comment", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          this.$alert("评论成功", "提示", {
            confirmButtonText: "确定"
          });
          this.flag = false;
          this.getQuestion();
        });
    },
    //评论回复
    sumbitP(item) {
      console.log(item.id);
      //  return;
      if (this.textP == "") {
        this.$confirm("评论内容不能为空", "提示", {
          type: "warning"
        });
        return;
      }
      let param = {
        source_id: item.id,
        member_id: this.getCookie("member_id"),
        content: this.textP,
        type: 1
      };
      this.$axios
        .post("/api/App/User/Question/comment", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          this.$alert("评论成功", "提示", {
            confirmButtonText: "确定"
          });
          this.i = -1;
          // this.flag = false;
          // this.getQuestion();
        });
    },
    // 关注问题
    gz(){
      let param = {
        source_id: this.id,
        member_id: this.getCookie("member_id"),
        type: 1
      };
      this.$axios
        .post("/api/App/User/Question/web_attentions", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {  
          this.questionInfo.is_follower = 1;
          // console.log(item.is_attentions)
        }); 
    },
    //取消问题
    qx(){
      let param = {
        source_id: this.id,
        member_id: this.getCookie("member_id"),
        type: 1
      };
      this.$axios
        .post("/api/App/User/Question/web_cancel_attentions", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          this.questionInfo.is_follower = 0;
        });
    }
  },
  created() {
    this.getmessage();
    this.getQuestion();
  },
  components: {
    Header
  }
};
</script>
<style lang="scss" scoped>
.classification {
  width: 1170px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .left {
    width: 810px;
    .left-container {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 10px;
      background:#fff;
      .box {
        .title {
          color: #000;
          font-size: 32px;
          text-align: left;
          letter-spacing: 3px;
          padding-top: 10px;
          margin-left: 20px;
        }
        .content {
          margin-top: 20px;
          text-align: left;
          margin-left: 20px;
          font-size: 16px;
          margin-right: 20px;
          border-radius: 10px;
        }
        .item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          list-style: none;
          width: 60%;
          margin: 0 auto;
          margin-top: 10px;
          li {
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        .comment {
          width: 322px;
          height: auto;
          text-align: left;
          margin-top: 20px;
          margin-left: 40px;
          margin-right: 40px;
          background: #aed6ff;
          border-radius: 10px;
          margin-bottom: 20px;
          .comment_list {
            height: 130px;
            padding: 20px;
            cursor: pointer;
          }
        }
      }
      .tab_right_menu {
        width: 90%;
        margin:0 auto;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          position: absolute;
          left: 30px;
          // top: 50px;
          bottom: 10px;
          height: 20px;
          width: 55px;
          border-radius: 10px;
          color: #fff;
          background-color: #5d90be;
          outline: none;
          border: 0px;
          font-size: 10px;
          margin-top: 10px;
        }
        li {
          list-style: none;
          font-size: 10px;
          color: #fff;
          margin-top: 10px;
          cursor: pointer;
        }
      }
      .container {
        padding-top: 15px;
        textarea {
          resize: none;
          border-radius: 5px;
          border: 0;
          width: 100%;
          font-size: 12px;
          height: 100px;
          outline: none;
        }
        .container-foot {
          padding-top: 10px;
          padding-bottom: 10px;
          text-align: right;
          span {
            padding-right: 20px;
            cursor: pointer;
          }
          .comment-submit {
            border: 1px solid #5079b7;
            background-color: #fff;
            color: #5079b7;
            display: inline-block;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 14px;
            line-height: 23px;
            height: 24px;
            cursor: pointer;
            outline: none;
          }
          .smilies-wrapper {
            cursor: pointer;
            position: relative;
            .button--smile {
              font-size: 12px;
              .fa {
                font-size: 20px;
                display: inline-block;
                margin-right: 6px;
                vertical-align: -3px;
              }
              i {
                width: 30px;
                height: 30px;
                background: red;
              }
            }
            .my-smilies {
              background-color: #fff;
              border: 1px solid #eee;
              border-radius: 5px;
              display: none;
              left: -36px;
              padding: 10px;
              position: absolute;
              top: 40px;
              width: 210px;
              z-index: 1;
            }
          }
        }
      }
    }
  }

  .right {
    width: 330px;
    img {
      display: block;
      width: 100%;
      height: 130px;
      border-radius: 10px;
      margin-bottom: 40px;
    }
    .right-tags {
      background: #fff;
      width: 100%;
      height: 220px;
      .tags-title {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        position: relative;
        border-bottom: 2px solid #f8f8f8;
        p {
          position: absolute;
          left: 0;
          bottom: -18px;
          font-size: 18px;
          border-bottom: 2px solid #5b90bc;
        }
      }
      .tags-content {
        width: 170px;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        div {
          width: 80%;
          padding-left: 20px;
          span {
            display: inline-block;
            width: 60px;
            height: 20px;
            border-radius: 10px;
            font-size: 10px;
            color: #ddd;
            border: 1px solid #ddd;
            margin-bottom: 20px;
          }
        }
      }
    }
    .tags-list {
      background: #f5f5f5;
      width: 100%;
      margin-top: 30px;
      height: 200px;
      position: relative;
      .box {
        height: 50px;
        width: 90%;
        position: absolute;
        bottom: -10px;
        left: 5%;
        color: #f5f5f5;
        background: #000;
        opacity: 0.5;
        border-radius: 0px 0px 10px 10px;
        line-height: 50px;
        font-size: 18px;
        padding-right: 80px;
      }
      .list-title {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        position: relative;
        border-bottom: 2px solid #f0f0f0;
        p {
          position: absolute;
          left: 0;
          bottom: -18px;
          font-size: 18px;
          border-bottom: 2px solid #5b90bc;
        }
      }
      img {
        display: block;
        width: 90%;
        margin: 0 auto;
        height: 150px;
        border-radius: 10px;
        margin-top: 10px;
      }
    }
  }
}
</style>


